<template>
  <div>
    <el-card>
      <div class="flex flex-between flex-center">
        <div class="title">添加产品</div>
      </div>
    </el-card>

    <el-row class="tab-wrap">

      <el-card>
        <div slot="header">产品设置</div>
        <div class="upload-wrap">
          <div>
            <el-upload
              drag
              action="void"
              accept=".pdf"
              :http-request="customUpload"
              :on-remove="handleRemove"
              :on-progress="progressA"
              :file-list="fileList"
              ref="upload"
              :auto-upload="true"
              :limit="1"
              :on-exceed="exceed"
              :show-file-list="false"
              :before-upload="beforePDFUpload"
            >
              <div v-if="!isUpload">
                <img
                  class="el-upload-icon"
                  src="../../../assets/image/upload-icon-2.png"
                  alt=""
                >
                <div class="el-upload-text">将PDF文件拖入此处，或点击上传</div>
                <div class="el-upload-text-small">大小不得超过10M</div>
                <div class="el-upload-text-small">建议上传16:9 或 4:3 的比例</div>
              </div>
              <!-- <img v-if="showImage1" :src="showImage1" class="avatar el-icon-plus" /> -->
              <div
                v-loading="loading"
                v-if="isUpload"
                class="download-wrap"
              >
                <div
                  class="img-wrap"
                  style="position: relative;"
                  ref="rotate"
                >
                  <img
                    v-if="!imgUrl"
                    src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2583035764,1571388243&fm=26&gp=0.jpg"
                    style="width:442px;height245px;"
                    alt=""
                  >
                  <img
                    v-if="imgUrl"
                    :src="imgUrl"
                    style="width:442px;height245px;"
                    alt=""
                  >
                  <img
                    v-if="imgUrl"
                    class="change-icon"
                    src="../../../assets/image/change2-icon.png"
                    @click.stop="rotate"
                    alt=""
                  >
                </div>
                <div
                  class="down-loading-mask"
                  :style="{width:percent + '%'}"
                ></div>
              </div>
            </el-upload>
          </div>

        </div>
      </el-card>

      <div
        class="grid-content bg-purple flex flex-end"
        style="margin-right:73px;"
        v-if="isComplete"
      >
        <el-button
          @click="clear"
          style="width:160px;height40px;margin-right:73px;margin-top:30px"
        >清空</el-button>
        <el-dialog
          :visible.sync="deletePop"
          style="border-radius: 16px"
          class="myPicShowDialogClasss"
          center
        >
          <div class="delete-pop-wrap">
            <div
              class="flex flex-center justify-content"
              style="width:280px;height:124px"
            >您是否要清空内容?</div>
            <div
              style="padding:19px 42px;"
              class="border-top"
            >
              <el-button
                style="width:88px;height:36px"
                @click="deletePop = false"
              > 取消</el-button>
              <el-button
                style="width:88px;height:36px"
                @click="confirmClear"
                type="primary"
              >确定</el-button>
            </div>
          </div>
        </el-dialog>
        <el-button
          type="primary"
          @click="next"
          style="width:160px;height40px;margin-right:73px;margin-top:30px"
        >下一步</el-button>
      </div>

    </el-row>
  </div>
</template>
<script>
import axios from 'axios'
import {
  getToken
} from '@/utils/auth'
export default {
  data() {
    return {
      deletePop: false,

      ended: false,
      isUpload: false,
      deg: 0,
      isComplete: false,
      percent: 0, // 上传进度
      fileList: [], //上传的文件
      file: {},
      fileName: null, // 上传的文件名
      imgUrl: null,
      loading: false
    }
  },
  methods: {
    // 检验文件
    beforePDFUpload(file) {
      const isPDF = file.type === 'application/pdf'
      const isLt100M = file.size / 1024 / 1024 < 100
      if (!isPDF) {
        this.$message.error('上传文件只能是 PDF 格式!')
      }
      if (!isLt100M) {
        this.$message.error('上传PDF大小不能超过 100MB!')
      }
      return isPDF && isLt100M
    },
    // 上传文件
    customUpload(file) {
      let FormDatas = new FormData()
      this.fileName = file.file.name
      FormDatas.append('file', file.file)
      this.isUpload = true
      this.loading = true
      axios({
        url: 'http://114.55.105.176:7005/productfile/upLoadPDF',
        method: 'post',
        headers: {
          "Access-Token": getToken()
        },
        data: FormDatas,
        //上传进度
        onUploadProgress: progressEvent => {
          let num = ((progressEvent.loaded / progressEvent.total) * 100) | 0 //百分比
          file.onProgress({ percent: num }) //进度条
        }
      })
        .then(res => {
          this.file = res.data.data
          let newList = this.file.materialsIds.split(',')
          this.imgUrl = 'http://114.55.105.176:7000/temp/' + newList[0]
          this.isComplete = true
          this.$message({
            type: 'success',
            message: '上传成功!'
          })
          this.loading = false
          file.onSuccess() //上传成功(打钩的小图标)
        })
        .catch(() => {
          this.loading = false
          this.$refs.upload.clearFiles()
          this.$message.error('上传失败!')
        })
    },
    /**     文件正在上传时的钩子    **/
    progressA(event, file) {
      this.percent = event.percent
    },
    exceed() {
      this.$message('不能上传更多')
    },
    /**     移除上传文件    **/
    handleRemove(file) {
      // this.$refs.upload.abort() //取消上传
      // this.$message({ message: '成功移除' + file.name, type: 'success' })
    },
    // 旋转
    rotate() {
      this.deg += 90
      // console.log(deg)
      this.$refs.rotate.style.transform = `rotate(${this.deg}deg)`
      // this.$refs.rotate.style.transform = `rotate(90deg)`
    },
    // 确认清空图片

    confirmClear() {
      this.imgUrl = ''
      this.isUpload = false
      this.isComplete = false
      this.$refs.upload.clearFiles()
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
    },
    // 清空
    clear() {
      this.deletePop = true
    },
    // 下一步
    next() {
      this.$router.push('/product/addSetting')
      this.$router.push({
        path: `/product/addSetting`, // 只是把query改了，其他都没变
        query: {
          params: {
            productFile: {
              materialsIds: this.file.materialsIds,
              fileUrl: this.file.fileUrl
            },
            productName: '',
            productTitle: '',
            pdfHomePage: this.imgUrl,
            productFileName: this.fileName
          }
        }
      })
    }
  }
}
</script>
<style>
.tab-wrap {
  padding: 20px 30px;
  box-sizing: border-box;
}

.el-upload-dragger {
  width: 520px;
  height: 520px;
  /* display: flex; */
  /* padding-top: 100px; */
  box-sizing: border-box;
  /* justify-content: center; */
}
.upload-wrap {
  display: flex;
  justify-content: center;
}
.download-wrap {
  position: relative;
  width: 520px;
  height: 520px;

  border-radius: 0px 8px 8px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* .download-wrap:hover {
  background: rgba(134, 177, 252, 0.7);
} */
.img-wrap {
  /* border: 1px solid #000; */
  border-radius: 14px;
  box-shadow: 0 8px 4px 8px rgba(0, 21, 41, 0.08);
}
.change-icon {
  width: 40px;
  height: 40px;
  position: absolute;
  right: -15px;
  top: -15px;
  z-index: 10;
}
.down-loading-mask {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(212, 225, 248, 0.6);
  border-radius: 0px 8px 8px 0px;
  height: 520px;
}
.myPicShowDialogClasss .el-dialog {
  width: 280px;
}
.myPicShowDialogClasss .el-dialog__header {
  padding: 0;
}

.myPicShowDialogClasss .el-dialog__body {
  padding: 0;
}
.el-upload-icon {
  width: 160px;
  height: 117px;
  margin-top: 136px;
}
.el-upload-text {
  font-size: 28px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1b1b1b;
  margin-top: 45px;
  margin-bottom: 15px;
}
.el-upload-text-small {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #888888;
}
</style>

